<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/menu.js"></script>


    <style>
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
        }
    </style>

    <script type="text/javascript">
        var date;
        function now(){
            date = new Date().toLocaleString();
            $(".time").text(date);
        }
        setInterval("now()",1000);
    </script>

</head>
<body>
<div id="app" style="height: 600px">
    <el-container>
        <el-header height="90px">
            <!--<el-image style="width: 300px; height: 95px;text-align: left" src="img/logo.png"></el-image>-->
            <span style="margin-left: 1000px">欢迎您！<span id="loginUser"></span></span>
            <span>系统时间：</span><span class="time"></span>
            <el-link type="success" style="margin-left: 15px" href="login_in.html">退出登录</el-link>
        </el-header>
        <el-container>
            <el-aside width="230px"  style="text-align: left;line-height:20px">


                <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                    <i v-if="isCollapse == true" class="el-icon-s-unfold" round size="mini" @click="showAll"></i>
                    <i v-if="isCollapse == false" class="el-icon-s-fold" round size="mini" @click="hideAll"></i>

                    <el-submenu v-for="(item,index) in menuItem" :index="new String(index)" :key="item.id">
                        <template slot="title">
                            <i :class="item.iron"></i>
                            <span slot="title">{{item.name}}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="(child,index) in item.children"><el-link href="#" @click.native="showUrl(child.url)" >{{child.name}}</el-link></el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-main id="main">
                <iframe :src="pageUrl" width="100%" height="560px"
                        frameborder="no" scrolling="no"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script>
    window.onload = function (){
        let vm = new Vue({
            el:"#app",
            data:{
                isCollapse: true,
                menuItem:menuItem,
                isShowThis:false,
                isShowThat:true,
                pageUrl:""
            },
            component:{

            },
            methods:{
                handleOpen(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleClose(key, keyPath) {
                    console.log(key, keyPath);
                },
                showAll:function (){
                    this.isCollapse = false;
                    this.isShowThis=true;
                    this.isShowThat=false;
                },
                hideAll:function (){
                    this.isCollapse = true;
                    this.isShowThis=false;
                    this.isShowThat=true;
                },
                showUrl:function (url){
                    this.pageUrl = url;
                },
                init:function (){
                    axios.get("getAccount").then(function (resp){
                        $("#loginUser").html(resp.data.data.account);
                    });
                }
            }
        });

        vm.init();
    }


</script>
</html>